<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码工具</title>
    <script src="js/qrcode.min.js"></script>
    <script src="js/jsQR.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }

        body {
            background: #f0f2f5;
            min-height: 100vh;
            padding: 2rem;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .app-header {
            background: #2196F3;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        .nav-tabs {
            display: flex;
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 1rem;
            background: #f0f2f5;
            cursor: pointer;
        }

        .tab.active {
            background: white;
            color: #2196F3;
            font-weight: 500;
            border-bottom: 2px solid #2196F3;
        }

        .content-section {
            display: none;
            padding: 1rem;
            gap: 1rem;
        }

        .content-section.active {
            display: flex;
            flex-direction: row;
        }

        .section-panel {
            flex: 1;
            padding: 1rem;
            min-height: 400px;
        }

        textarea {
            width: 100%;
            aspect-ratio: 1 / 1;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 0.5rem;
            resize: none;
        }

        textarea:focus {
            outline: none;
        }

        .qr-code {
            display: flex;
            width: 100%;
            aspect-ratio: 1 / 1;
            border: 2px dashed #ddd;
            border-radius: 1rem;
            padding: 1rem;
        }

        #qrcode img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .upload-area {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            background: #f8f9fa;
            border: 2px dashed #ddd;
            border-radius: 1rem;
            overflow: hidden;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        .upload-area.dragover,
        .upload-area:hover {
            border-color: #2196F3;
            background: rgba(33, 150, 243, 0.05);
        }

        .upload-hint {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            text-align: center;
            z-index: 1;
            color: rgba(0, 0, 0, 0.3);    
        }

        #preview {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: none;
            background: white;
            padding: 1rem;
        }

        #preview[src] {
            display: block;
        }

        .decode-result {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 0.5rem;
            word-break: break-all;
            margin-top: 1rem;
        }
    </style>
</head>

<body>
    <main class="container">

        <!-- 标题 -->
        <header class="app-header">
            <h1>二维码工具</h1>
        </header>

        <!-- 导航栏 -->
        <nav class="nav-tabs">
            <div class="tab active" data-tab="generate">生成二维码</div>
            <div class="tab" data-tab="decode">解析二维码</div>
        </nav>

        <!-- 生成二维码区域 -->
        <section class="content-section generate-section active" data-content="generate">
            <!-- 二维码设置选项 -->
            <div class="section-panel">
                <textarea id="content" placeholder="请输入要编码的文字或网址..."></textarea>
            </div>

            <!-- 显示二维码 -->
            <div class="section-panel">
                <div class="qr-code">
                    <div id="qrcode">
                        <img id="tmp" src="img/qrcode.png">
                    </div>
                </div>
            </div>
        </section>

        <!-- 解析二维码区域 -->
        <section class="content-section decode-section" data-content="decode">
            <!-- 上传二维码 -->
            <div class="section-panel">
                <div class="upload-area">
                    <div class="upload-hint" id="upload-hint">
                        <p>点击选择图片或拖放到此区域</p>
                    </div>
                    <input type="file" id="file-input" accept="image/*" hidden>
                    <img id="preview" src="img/qrcode.png">
                </div>
            </div>

            <!-- 显示解析结果 -->
            <div class="section-panel">
                <h3>解析结果：</h3>
                <div class="decode-result"></div>
            </div>
        </section>
    </main>

    <script>

        // 切换选项卡
        function switchTab(tabName) {

            // 切换选项卡激活状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.toggle('active', tab.dataset.tab === tabName)
            });

            // 切换对应内容区域的显示状态
            document.querySelectorAll('.content-section').forEach(section => {
                const isActive = section.dataset.content === tabName;
                section.classList.toggle('active', isActive);
            });
        }

        // 为选项卡添加点击事件监听
        document.querySelector('.nav-tabs').addEventListener('click', (e) => {
            const tab = e.target.closest('.tab');
            if (tab) switchTab(tab.dataset.tab);
        });

        // 实时生成二维码
        let qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 300,
            height: 300,
            margin: 10,
            correctLevel: QRCode.CorrectLevel.H
        });

        function makeCode() {
            var elText = document.getElementById("content");
            if (!elText.value) {
                elText.focus();
                document.querySelector('#qrcode img:last-child').style.display = 'none';
                document.querySelector('#qrcode').setAttribute('title', '');
                document.getElementById('tmp').style.display = 'block';
                return;
            }else{
                document.getElementById('tmp').style.display = 'none';
            }
            qrcode.makeCode(elText.value);
        }

        document.getElementById('content').addEventListener('input', function () {
            makeCode();
        })

        document.querySelector('.upload-area').addEventListener('click', function () {
            document.getElementById('file-input').click();
        });

        // 文件选择事件监听
        document.getElementById('file-input').addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (file) {
                decodeQR(file);
            }
        });

        // 拖放功能
        const uploadArea = document.querySelector('.upload-area');
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#2196F3';
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.borderColor = '#ddd';
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '#ddd';
            const file = e.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                document.getElementById('file-input').files = e.dataTransfer.files;
                decodeQR(file);
            }
        });

        // 解析二维码
        function decodeQR(file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                const img = new Image();
                img.onload = function () {
                    // 创建canvas处理图像
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');

                    // 保持正方形比例
                    const size = Math.min(img.width, img.height);
                    canvas.width = size;
                    canvas.height = size;

                    // 居中裁剪
                    ctx.drawImage(
                        img,
                        (img.width - size) / 2, (img.height - size) / 2, // 源裁剪位置
                        size, size, // 源裁剪尺寸
                        0, 0, // 目标位置
                        size, size // 目标尺寸
                    );

                    // 解析二维码
                    const imageData = ctx.getImageData(0, 0, size, size);
                    const code = jsQR(imageData.data, size, size);

                    // 显示结果
                    const resultDiv = document.querySelector('.decode-result');
                    if (code) {
                        resultDiv.textContent = code.data;
                    } else {
                        resultDiv.textContent = "未检测到二维码";
                    }

                    // 显示预览图
                    const preview = document.getElementById('preview');
                    preview.src = canvas.toDataURL();
                    document.getElementById('upload-hint').style.display = 'none';
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

    </script>

</body>

</html>